// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment } from '@knno/dom/jsx';
import { dom, Nodes, render } from '@knno/dom';
import { lightTheme, darkTheme, vars } from '@knno/ui/global.css';
import { Button } from '@knno/ui/jsx/button';
import { RouterView } from '../../../dist/jsx/routerView';
import { ShowMenu, routerDef } from './menu';
import { setLanguage } from '@knno/i18n';
import { Mutable } from '@knno/ui/jsx/mutable';
import SVGApp from '@mdi/svg/svg/apps.svg';
import SVGSize from '@mdi/svg/svg/format-size.svg';
import SVGTheme from '@mdi/svg/svg/theme-light-dark.svg';
import SVGLanauge from '@mdi/svg/svg/translate-variant.svg';
import { PopMenu } from '../../../dist/components/popMenu/popMenu';

let lang = 'zh';
let theme = 'System';
let zoom = '100%';
let m: Mutable;
render(
	<Mutable
		ref={(it) => (m = it)}
		style={{
			display: 'grid',
			height: '100%',
			gridTemplateRows: '4rem minmax(0, 1fr)',
			gridTemplateColumns: '20rem minmax(0, 1fr)',
		}}
		render={function () {
			return (
				<>
					<div
						style={{
							display: 'flex',
							alignItems: 'center',
							justifyContent: 'flex-start',
							padding: '0 0.5em',
							fontSize: '2.5em',
							fontStyle: 'italic',
							fontWeight: 'bold',
							color: 'white',
							backgroundColor: vars.color.menuBackStart,
						}}
					>
						@knno/ui
					</div>
					<div
						style={{
							display: 'flex',
							borderBottom: `1px solid ${vars.color.border}`,
							backgroundColor: vars.color.baseBackground,
						}}
					>
						<Button icon={SVGApp} type="info-text">
							应用
						</Button>
						<span style={{ flex: 1 }}></span>
						<Button
							icon={SVGSize}
							menu
							type="info-text"
							onclick={function () {
								PopMenu.show(
									{
										refer: this,
										useAction: true,
										popupPosition: 'bottom-center',
									},
									[{ text: '50%' }, { text: '75%' }, { text: '100%' }, { text: '125%' }, { text: '150%' }].map((item) =>
										item.text === zoom ? { ...item, checked: true } : item
									)
								).onSelect((row) => {
									zoom = row.text + '';
									const z = parseInt(zoom) / 100;
									document.documentElement.style.fontSize = 14 * z + 'px';
								});
							}}
						>
							缩放
						</Button>
						<Button
							icon={SVGTheme}
							menu
							type="info-text"
							onclick={function () {
								PopMenu.show(
									{
										refer: this,
										useAction: true,
										popupPosition: 'bottom-center',
									},
									[{ text: 'System' }, { text: 'Light' }, { text: 'Dark' }].map((item) =>
										item.text === theme ? { ...item, checked: true } : item
									)
								).onSelect((row) => {
									theme = row.text + '';
									const root = dom.wrap(document.documentElement);
									root.removeClass(lightTheme, darkTheme);
									if (row.text === 'Light') {
										root.addClass(lightTheme);
									} else if (row.text === 'Dark') {
										root.addClass(darkTheme);
									}
								});
							}}
						>
							主题
						</Button>
						<Button
							icon={SVGLanauge}
							menu
							type="info-text"
							onclick={function () {
								PopMenu.show(
									{
										refer: this,
										useAction: true,
										popupPosition: 'bottom-center',
									},
									[
										{ value: 'zh', text: '中文' },
										{ value: 'en', text: 'English' },
									].map((item) => (item.value === lang ? { ...item, checked: true } : item))
								).onSelect((row) => {
									lang = row.value + '';
									setLanguage(lang);
									m.refresh();
								});
							}}
						>
							语言 / Language
						</Button>
					</div>
					<ShowMenu />
					<RouterView rules={routerDef} style={{ padding: '2rem', overflow: 'auto' }} />
				</>
			);
		}}
	></Mutable>
);
